<template>
	<view class="register-container">
		<tn-button backgroundColor="tn-bg-left"
			style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;"
			:border="false" @click="handleReturn">
			<text class="tn-icon-left"></text>
		</tn-button>
		<!-- Logo -->
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit"></image>
		</view>

		<!-- 表单 -->
		<view class="form">
			<view class="input-group">
				<image class="icon" src="/static/password.png" mode="aspectFit"></image>
				<input class="input" type="text" placeholder="请输入用户名" placeholder-class="placeholder"
					v-model="user.username" />
			</view>

			<!-- 手机号输入框 -->
			<view class="input-group">
				<image class="icon" src="/static/phone.png" mode="aspectFit"></image>
				<input class="input" type="text" placeholder="请输入手机号" placeholder-class="placeholder"
					v-model="user.mobile" />
			</view>

			<!-- 验证码输入框 -->
			<view class="input-group">
				<image class="icon" src="/static/code.png" mode="aspectFit"></image>
				<input class="input" type="text" placeholder="请输入验证码" placeholder-class="placeholder"
					v-model="user.code" />
				<view class="line"></view>
				<button class="code-btn" :disabled="isCodeDisabled" @click="handleGetCode">
					{{ codeBtnText }}
				</button>
			</view>

			<!-- 密码输入框 -->
			<view class="input-group">
				<image class="icon" src="/static/password.png" mode="aspectFit"></image>
				<input class="input" type="password" placeholder="请设置密码" placeholder-class="placeholder"
					v-model="user.password" />
			</view>

			<!-- 注册按钮 -->
			<button class="register-btn" @click="handleRegister" :disabled="isSubmitting">
				注册
			</button>
		</view>

		<!-- 底部链接 -->
		<view class="footer">
			<text class="link" @click="handleLogin">已有账号？去登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					code: "",
					username: "",
					password: "",
					mobile: ""
				},
				isCodeDisabled: false,
				codeBtnText: "获取验证码",
				countdown: 60,
				isSubmitting: false
			};
		},
		methods: {
			handleReturn() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleRegister() {
				let that = this
				that.isSubmitting = true
				if (this.user.username && this.user.mobile && this.user.code && this.user.password) {
					uni.request({
						url: this.baseUrl + "/wx/auth/register",
						method: "POST",
						data: {
							code: that.user.code,
							username: that.user.username,
							password: that.user.password,
							mobile: that.user.mobile
						},
						success: function(res) {
							if (res.data.errno === 0) {
								let second = 4
								const timer = setInterval(() => {
									second--;
									uni.showToast({
										title: "注册成功将在" + second + "后跳转",
										icon: "none",
									});
									if (second === 0) {
										clearInterval(timer);
										uni.reLaunch({
											url: "/pages/Information/login/login",
										});
										that.isSubmitting = false
									}
								}, 1000);
							} else {
								uni.showToast({
									title: res.data.errmsg,
									icon: "none",
								});
								let second = 2
								const timer = setInterval(() => {
									second--;
									if (second === 0) {
										clearInterval(timer);
										that.isSubmitting = false
									}
								}, 1000);
							}
						},
						fail(e) {
							console.log(e);
						}
					})
				} else {
					uni.showToast({
						title: "请填写完整信息",
						icon: "none",
					});
					that.isSubmitting=false
				}
			},
			handleGetCode() {
				if (!this.user.mobile) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				} else if (!/^1[3-9]\d{9}$/.test(this.user.mobile)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
					});
					return;
				}

				// 模拟发送验证码
				this.isCodeDisabled = true;
				this.codeBtnText = `${this.countdown}s后重新获取`;
				const timer = setInterval(() => {
					this.countdown--;
					this.codeBtnText = `${this.countdown}s后重新获取`;
					if (this.countdown === 0) {
						clearInterval(timer);
						this.isCodeDisabled = false;
						this.codeBtnText = "获取验证码";
						this.countdown = 60;
					}
				}, 1000);
			},
			handleLogin() {
				uni.redirectTo({
					url: "/pages/Information/login/login"
				})
			}
		},
	};
</script>

<style>
	/* 页面容器 */
	.register-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: #f5f5f5;
		padding: 20px;
		margin-bottom: 20%;
	}

	/* Logo */
	.logo {
		margin-bottom: 40px;
	}

	.logo image {
		width: 100px;
		height: 100px;
	}

	/* 表单 */
	.form {
		width: 100%;
		max-width: 300px;
	}

	.input-group {
		margin-bottom: 20px;
		position: relative;
	}

	.icon {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.input {
		width: 100%;
		height: 40px;
		font-size: 16px;
		color: #333;
		padding: 10px 0 10px 30px;
		background-color: transparent;
		border: none;
		outline: none;
	}

	.placeholder {
		color: #999;
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #e0e0e0;
		position: absolute;
		bottom: 0;
		left: 0;
		transition: background-color 0.3s;
	}

	.line.active {
		background-color: #ff5000;
	}

	/* 验证码按钮 */
	.code-btn {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background-color: transparent;
		color: #ff5000;
		font-size: 14px;
		border: none;
		outline: none;
	}

	.code-btn:disabled {
		color: #999;
	}

	/* 注册按钮 */
	.register-btn {
		width: 100%;
		height: 40px;
		background-color: #ff5000;
		color: #fff;
		font-size: 16px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		border: none;
		outline: none;
		transition: background-color 0.3s;
	}

	.register-btn.active {
		background-color: #e94e00;
	}

	/* 底部链接 */
	.footer {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		width: 100%;
		max-width: 300px;
	}

	.link {
		color: #ff5000;
		font-size: 14px;
		text-decoration: none;
		transition: opacity 0.3s;
	}
</style>